<template>
    <div class="boxkung">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="0">{{$t('accinfo')}}</el-menu-item>
            <el-menu-item index="1">{{$t('essinfo')}}</el-menu-item>
            <el-menu-item index="2">{{$t('loginpwd')}}</el-menu-item>
            <el-menu-item index="3">{{$t('paymentcode')}}</el-menu-item>
            <el-menu-item index="4">{{$t('bankcard')}}</el-menu-item>
            <el-menu-item index="5">{{$t('deviceinfo')}}</el-menu-item>
            <el-menu-item index="6">{{$t('loginlog')}}</el-menu-item>
            <!-- <el-button type="primary" icon="el-icon-d-arrow-left" :circle="true" @click="goAway"></el-button> -->
        </el-menu>
        <router-view></router-view>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
    data() {
        return {
         menu: [
                '/sec/userdetails/accinfo',
                '/sec/userdetails/essinfo',
                '/sec/userdetails/loginpwd',
                '/sec/userdetails/paycode',
                '/sec/userdetails/bankcode',
                '/sec/userdetails/deviceInfo',
                '/sec/userdetails/loginlog'
            ],
            activeIndex: '0',
            userInfo: null
        }
    },
    methods: {
        handleSelect (key, keyPath) {
            window.sessionStorage.setItem('kidx', key)
            // 导航栏选中，页面跳转
            this.$router.push(this.menu[key])
        },
        goAway () {
             // 返回商户列表
             window.sessionStorage.removeItem('kidx')
            this.$router.push('/merManage/merList')
        }
    },
    mounted () {
      if (window.sessionStorage.getItem('kidx')) {
        this.activeIndex = window.sessionStorage.getItem('kidx')
      } else {
        this.activeIndex = '0'
      }
      this.userInfo = Cookies.get('userinfo')
    },
    destroyed () {
        window.sessionStorage.removeItem('kidx')
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

.boxkung {
    width: 800px;
    margin: 0 auto;
}
.el-menu {
    position: relative;
    .el-button {
        position: absolute;
        right: 0;
    }
}
@{deep} .el-menu-item {
    padding: 0 18px!important;
}
.sup {
    width: 200px;
}
</style>
